<template>
  <component :is="tag || 'div'" class="hand-box" :class="[`type${type}`]">
    <slot />
    <template v-if="type === '1'">
      <div class="light-bottom"></div>
      <div class="light-left"></div>
      <div class="light-right"></div>
    </template>
    <template v-if="type === '3'">
      <div class="light-bottom"></div>
      <div class="light-bottom-1"></div>
      <div class="light-left"></div>
      <div class="light-right"></div>
    </template>
  </component>
</template>

<script
  lang="ts"
  name="HandBox"
  setup
>
// eslint-disable-next-line vue/require-prop-types
defineProps(['type', 'tag'])
</script>

<style>
.hand-box>* {
  position: relative;
  z-index: 2;
}
</style>
<style
  lang="scss"
  scoped
>
.hand-box {
  @apply relative select-none text-white;
  height: 48px;
  user-select: none;

  &::before {
    content: '';
    @apply absolute backdrop-filter backdrop-blur-3 w-full h-full top-0 left-0 z-1;
    background: linear-gradient(0deg, rgba(98, 161, 255, 0.1) 0%, rgba(26, 86, 221, 0.65) 105.94%);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.36), 0px 0px 12px rgba(69, 166, 255, 0.45) inset;
    border: 1px solid rgba(99, 138, 231, 1);
    border-radius: 8px;
  }

  &::after {
    content: '';
    @apply absolute z-0;
    height: 87.85%;
    background: linear-gradient(180deg, rgba(54, 195, 226, 0.75) 0%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0.45) 100%);
    opacity: 0.45;
    border: 1px solid rgba(76, 169, 255, 0.65);
    border-radius: 8px;
    bottom: -6.5px;
  }

  &.type1 {
    &::before {
      transform: perspective(100px) rotateX(4deg) translateZ(-2px);
    }

    &::after {
      width: 93%;
      left: 4%;
      transform: perspective(100px) rotateX(4deg) translateZ(-2px);
    }

    .light-bottom {
      @apply absolute;
      width: 60%;
      height: 1px;
      right: 14%;
      bottom: 0px;
      background: linear-gradient(270deg,
          rgba(0, 0, 0, 0) 5.57%,
          rgba(255, 255, 255, 1) 37.92%,
          rgba(0, 0, 0, 0) 100%);
    }

    .light-left {
      @apply absolute z-1;
      width: 52.5px;
      height: 46px;
      background: url(../../assets/images/light/play-highlight-left-bottom.svg) no-repeat left top / 100% 100%;
      bottom: 0px;
      left: 0px;
    }

    .light-right {
      @apply absolute z-1;
      width: 47px;
      height: 43px;
      background: url(../../assets/images/light/play-highlight-right-bottom.svg) no-repeat left top / 100% 100%;
      bottom: 0px;
      right: 0;
    }
  }

  &.type2 {
    &::before {
      transform: skewX(6deg);
    }

    &::after {
      width: 73%;
      left: 13.5%;
      transform: skewX(6deg);
    }
  }

  &.type3 {
    &::before {
      transform: skewX(-6deg);
    }

    &::after {
      width: 73%;
      left: 13.5%;
      transform: skewX(-6deg);
    }
  }
}

button.hand-box {

  &:active,
  &.active {
    transform: scale(0.9);
    transition: transform 0.3s ease;
    color: rgba(134, 204, 255, 1);

    &::before {
      background: linear-gradient(0deg, rgba(98, 161, 255, 0.1) 0%, rgba(26, 86, 221, 0.65) 105.94%);
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.36), 0px 0px 31px rgba(69, 166, 255, 0.45) inset, 0px 2px 24px rgba(139, 199, 255, 0.45) inset;
    }
  }
}
</style>
